//QQ登录界面
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12
// import "Http.js" as Http
import Http 1.0
Rectangle{
    property  bool  passwordCheck:false
    property  bool  aotoLoginCheck:false
    anchors.fill: parent
    color:"#ffffff"

    HttpUtils{

        id:http
    }

    //用户登录
    function userLogin(username,password){

        function onReply(reply){

            console.log(reply)
            console.log("请求结束")
           var  res=JSON.parse(reply)
        console.log(res.code)
            if(res.code==1){
                    console.log(res.code)
                    console.log("登录成功")
                    console.log(res.data.nickname)
                    appWindoow.loding("ZTest.qml",res.data)
                }else{
                    // errorInfo=res.msg
                    console.log("登录失败")
                }
            http.onReplySignal.disconnect(onReply)
        }
        http.onReplySignal.connect(onReply)
        http.postApi(`/lris/user/login`,{username:username,password:password})
    }

    Rectangle{
        id:loginFrom
        height:300
        width: parent.width
        color:"red"
        anchors.top: parent.top

        Rectangle{
            id:loginInputForm
            height:200
            width:parent.width
            anchors.top: parent.top
            //        color:"green"

            Rectangle {  //TextInput的可视化外观
                id:usernameInput
                width: 275
                height: 60
                color: "lightgrey"
                border.color: "#e0e0e0"
                anchors.horizontalCenter:  parent.horizontalCenter

                Rectangle {
                    anchors.fill: parent
                    anchors.topMargin: 0
                    anchors.bottomMargin: 1
                    anchors.leftMargin: 0
                    anchors.rightMargin: 0
                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: true
                          cursorShape: Qt.PointingHandCursor;
                        onEntered: {
                            usernameInput.border.color="#cccccc"
                        }
                        onExited: {
                            if(usernameInputText.focus){
                                return}
                            usernameInput.border.color="#e0e0e0"
                        }
                    }


                    Text{
                        anchors.fill: parent
                        visible:true
                        id:usernamehintText
                        text:"请输入QQ号/手机号/邮箱"
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.leftMargin: 10
                        anchors.topMargin: 25
                        font.bold: true
                        font.pixelSize: 18
                        color:"#808080"
                    }
                    TextInput{
                        id:usernameInputText
                        anchors.top: parent.top
                        anchors.topMargin: 25
                        anchors.left: parent.left
                        anchors.leftMargin: 10
                        width: 230
                        height: 80
                        color:"#000000"
                        text:"admin"
                        font.pointSize: 15
                        font.bold: true
                        anchors.margins: 20
                        //                        focus: true
                        clip: true
                        selectByMouse: true //设置光标大小
                        maximumLength: 23 //限制字符个数
                        onClipChanged: {
                            hintText.visible=false
                        }
                        onFocusChanged: {
                            if(focus){
                                usernamehintText.visible=false
                                console.log("获取了焦点")
                                usernameInput.border.color="#cccccc"

                            }else{
                                console.log("丢失焦点")
                                console.log(usernameInputText.text)
                                if(usernameInputText.text==""){
                                    usernamehintText.visible=true
                                }else{
                                    usernamehintText.visible=false
                                }
                                usernameInput.border.color="#e0e0e0"
                            }
                        }

                    }

                }
            }

            Rectangle {  //TextInput的可视化外观
                id:passwordInput

                anchors.top: usernameInput.bottom
                width: 275
                height: 60
                color: "lightgrey"
                border.color: "#e0e0e0"
                anchors.horizontalCenter:  parent.horizontalCenter
                Rectangle {
                    anchors.fill: parent
                    anchors.topMargin: 0
                    anchors.bottomMargin: 1
                    anchors.leftMargin: 0
                    anchors.rightMargin: 0
                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: true
                          cursorShape: Qt.PointingHandCursor;

                        onEntered: {
                            passwordInput.border.color="#cccccc"
                        }
                        onExited: {
                            if(passwordInputText.focus){
                                return}
                            passwordInput.border.color="#e0e0e0"
                        }
                    }


                    Text{
                        anchors.fill: parent
                        visible:true
                        id:passwordhintText
                        text:"请输入密钥"
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.leftMargin: 10
                        anchors.topMargin: 25
                        font.bold: true
                        font.pixelSize: 18
                        color:"#808080"
                    }
                    TextInput{
                        id:passwordInputText
                        anchors.top: parent.top
                        anchors.topMargin: 25
                        anchors.left: parent.left
                        anchors.leftMargin: 10
                        width: 230
                        height: 80
                        color:"#000000"
                        echoMode :TextInput.Password
                        text:"123456"
                        font.pointSize: 15
                        font.bold: true
                        anchors.margins: 20
                        //                        focus: true
                        clip: true
                        selectByMouse: true //设置光标大小
                        maximumLength: 23 //限制字符个数
                        onClipChanged: {
                            hintText.visible=false
                        }
                        onFocusChanged: {
                            if(focus){
                                passwordhintText.visible=false
                                console.log("获取了焦点")
                                passwordInput.border.color="#cccccc"

                            }else{
                                console.log("丢失焦点")
                                console.log(passwordInputText.text)
                                if(passwordInputText.text==""){
                                    passwordhintText.visible=true
                                }else{
                                    passwordhintText.visible=false

                                }
                                passwordInput.border.color="#e0e0e0"
                            }
                        }

                    }

                }
            }

            Button{
                height:40
                width:40
                onClicked: {
                    console.log(11111)
                }
                anchors.right: parent.right
                anchors.rightMargin: 35
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 85

                icon{
                    height:45
                    width:45
                    source: "qrc:/images/youjiantou"
                }


                indicator :Rectangle{

                    id:loginBtnRectangle
                    anchors.fill: parent
                    color:"#ffffff"
                    radius: 80
                    border.color: "#e1e2e2"

                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: true
                            cursorShape: Qt.PointingHandCursor;
                        onEntered: {
                            loginBtnRectangle.color="#f5f7f9"
                        }
                        onExited: {
                            loginBtnRectangle.color="#ffffff"}
                        onClicked: {
                            console.log(111111111111)
                            console.log("账号:"+usernameInputText.text+"密码:"+passwordInputText.text)
                            if(usernameInputText.text==""||passwordInputText.text==""){
                            console.log("空")
                                return
                            }

                            // //登录请求

                            userLogin(usernameInputText.text,passwordInputText.text)
                            // Http.login({"username":usernameInputText.text,"password":passwordInputText.text},function (res){
                            //     console.log(res.data)
                            //     if(res.code===1){
                            //         console.log(res.code)
                            //         console.log("登录成功")
                            //         console.log(res.data.nickname)
                            //         appWindoow.loding("ZTest.qml",res.data)
                            //     }else{
                            //         errorInfo=res.msg
                            //         console.log("登录失败")
                            //     }
                            // })
                        }
                    }
                }
            }
            Button{
                id:erweimaBtn
                height:45
                width:45
                anchors.right: parent.right
                anchors.rightMargin: 25
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 35
                icon{
                    height:45
                    width:45
                    source: "qrc:/images/LoginEWM"
                }
                background: Rectangle{
                    anchors.fill: parent
                    color:"#ffffff"
                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: true
                          cursorShape: Qt.PointingHandCursor;
                        onEntered: {
                            erweimaBtn.icon.color="#2775ff"
                        }
                        onExited: {
                            erweimaBtn.icon.color="#626262"}

                    }


                }
            }




        }

        Rectangle{
            height:parent.height-loginInputForm.height
            width:parent.width
            anchors.top : loginInputForm.bottom





        }
    }

    Rectangle{
        height:parent.height-loginFrom.height
        width: parent.width
        anchors.bottom: parent.bottom


        Rectangle{
            id:passwordRemember
            height:35
            width:100
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 60
            anchors.leftMargin: 40

            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                   cursorShape: Qt.PointingHandCursor;
                onEntered: {
                    if(passwordCheck){
                        return
                    }
                    rememberPasswordRectangle.color="#f5f5f5"
                    rememberPasswordRectangle. border.color= "#2070ff"
                }
                onExited: {
                    if(passwordCheck){
                        return
                    }
                    rememberPasswordRectangle.color="#ffffff"
                    rememberPasswordRectangle. border.color= "#e9ebed"
                }
                onClicked: {
                    passwordCheck=!passwordCheck
                    if(passwordCheck){
                        rememberPasswordImage.source="qrc:/images/duihao"
                        rememberPasswordRectangle.color="#5391ff"
                    }else{
                        rememberPasswordImage.source= ""
                        rememberPasswordRectangle.color="#ffffff"
                    }

                }
            }


            Button{
                id:rememberPassword

                anchors.verticalCenter:  parent.verticalCenter
                height:20
                width:20
                Image{
                    id:rememberPasswordImage
                    height:20
                    width:20
                    source:""

                }

                background: Rectangle{
                    id:rememberPasswordRectangle
                    anchors.fill: parent
                    //                    color:"#5391ff"
                    border.color: "#e9ebed"
                    border.width: 1
                }

                MouseArea{
                    anchors.fill: parent
                    hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor;
                    onEntered: {
                        if(passwordCheck){
                            return
                        }
                        rememberPasswordRectangle.color="#f5f5f5"
                        rememberPasswordRectangle. border.color= "#2070ff"
                    }
                    onExited: {
                        if(passwordCheck){
                            return
                        }
                        rememberPasswordRectangle.color="#ffffff"
                        rememberPasswordRectangle. border.color= "#e9ebed"
                    }
                    onClicked: {
                        passwordCheck=!passwordCheck
                        if(passwordCheck){
                            rememberPasswordImage.source="qrc:/images/duihao"
                            rememberPasswordRectangle.color="#5391ff"
                        }else{
                            rememberPasswordImage.source= ""
                            rememberPasswordRectangle.color="#ffffff"
                        }

                    }
                }
            }
            Text{
                id:passwordAoto
                anchors.verticalCenter:  parent.verticalCenter
                anchors.left: rememberPassword.right
                anchors.leftMargin: 5

                font.pixelSize: 17
                text: "记住密码"
                font.bold: true
                color:"#999999"
            }
        }


        Rectangle{
            id:aotoLogin
            anchors.top: passwordRemember.bottom
            height:35
            width:100
            anchors.left: parent.left
            anchors.bottomMargin: 60
            anchors.leftMargin: 40


             MouseArea{
                 cursorShape: Qt.PointingHandCursor;
                 anchors.fill: parent
                 hoverEnabled: true
                 onEntered: {
                     if(aotoLoginCheck){
                         return
                     }
                     aotoLoginRectangle.color="#f5f5f5"
                     aotoLoginRectangle. border.color= "#2070ff"
                 }
                 onExited: {
                     if(aotoLoginCheck){
                         return
                     }
                     aotoLoginRectangle.color="#ffffff"
                     aotoLoginRectangle. border.color= "#e9ebed"
                 }
                 onClicked: {
                     aotoLoginCheck=!aotoLoginCheck
                     if(aotoLoginCheck){
                         aotoLoginImage.source="qrc:/images/duihao"
                         aotoLoginRectangle.color="#5391ff"
                     }else{
                         aotoLoginImage.source=""
                         aotoLoginRectangle.color="#ffffff"
                     }

                 }
             }


            Button{
                id:aotoLoginBtn
                anchors.verticalCenter:  parent.verticalCenter
                height:20
                width:20
                Image{
                    id:aotoLoginImage
                    height:20
                    width:20
                    source:""

                }

                background: Rectangle{
                    id:aotoLoginRectangle
                    anchors.fill: parent

                    border.color: "#e9ebed"
                    border.width: 1
                }

                MouseArea{
                    anchors.fill: parent
                    hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor;
                    onEntered: {
                        if(aotoLoginCheck){
                            return
                        }
                        aotoLoginRectangle.color="#f5f5f5"
                        aotoLoginRectangle. border.color= "#2070ff"
                    }
                    onExited: {
                        if(aotoLoginCheck){
                            return
                        }
                        aotoLoginRectangle.color="#ffffff"
                        aotoLoginRectangle. border.color= "#e9ebed"
                    }
                    onClicked: {
                        aotoLoginCheck=!aotoLoginCheck
                        if(aotoLoginCheck){
                            aotoLoginImage.source="qrc:/images/duihao"
                            aotoLoginRectangle.color="#5391ff"
                        }else{
                            aotoLoginImage.source=""
                            aotoLoginRectangle.color="#ffffff"
                        }

                    }
                }
            }
            Text{
                id:loginAoto

                anchors.left: aotoLoginBtn.right
                anchors.leftMargin: 5
                anchors.verticalCenter:  parent.verticalCenter
                font.pixelSize: 17
                text: "自动登录"
                font.bold: true
                color:"#999999"
            }
        }

        Rectangle{
            id:getBack
            anchors.right: parent.right
            height:35
            width:100
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 60
            anchors.rightMargin: 40
            Text{
                id:getbackText
                anchors.verticalCenter:  parent.verticalCenter
                font.pixelSize: 17
                anchors.right: parent.right
                text: "找回账号"
                font.bold: true
                color:"#999999"



            }

            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor;
                onEntered: {
                    getbackText.color="#1e6fff"
                }
                onExited: {
                    getbackText.color="#999999"
                }
                onClicked: {
                Qt.openUrlExternally("http://www.bing.com")
                }
            }

        }

        Rectangle{

            id:register
            anchors.right: parent.right
            height:35
            width:100
            anchors.top: getBack.bottom
            anchors.rightMargin: 40
            Text{
                id:registerText
                anchors.verticalCenter:  parent.verticalCenter
                font.pixelSize: 17
                anchors.right: parent.right
                text: "现在加入"
                font.bold: true
                color:"#999999"
            }

            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor;
                onEntered: {
                    registerText.color="#1e6fff"
                }
                onExited: {
                    registerText.color="#999999"
                }
                onClicked: {
                Qt.openUrlExternally("http://www.bing.com")
                }
            }

        }

    }

    Component.onCompleted: {
           console.log("已跳转至聊天页")
    // console.log(user.nickname)
    //     console.log("user头像"+user.headImg)




    }


}
